<template>
    <view class="com-balance">
        <view class="b-box">
            <view class="title">我的服务</view>
            <view class="s-box">
                <view class="s-item" @click="go('/pages-user/addr/list')">
                    <text class="cuIcon cuIcon-locationfill s-icon"></text>
                    <view class="s-txt">收货地址</view>
                </view>

                <view class="s-item kf">
                    <text class="cuIcon cuIcon-servicefill s-icon"></text>
                    <view class="s-txt">客服中心</view>
                    <button class="nbtn" open-type="contact">
                    </button>
                </view>
                <view class="s-item" @click="go('/pages-user/doc/index?key=user')">
                    <text class="cuIcon cuIcon-profilefill s-icon"></text>
                    <view class="s-txt">会员协议</view>
                </view>
                <view class="s-item" @click="go('/pages-user/doc/index?key=privacy')">
                    <text class="cuIcon cuIcon-newshotfill s-icon"></text>
                    <view class="s-txt">隐私政策</view>
                </view>
                <view class="s-item" @click="logout" v-if="$store.token">
                    <text class="cuIcon cuIcon-exit s-icon"></text>
                    <view class="s-txt">退出</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
const {
    proxy
} = getCurrentInstance()
function go(url) {
    let urls = ['/pages-user/doc/index?key=protocol','/pages-user/doc/index?key=policy','/pages-user/doc/index?key=buy' ]
    if (!proxy.$store.token && !urls.includes(url)) {
        proxy.$go('/pages/login/login')
        return
    }
    proxy.$go(url)
}

function logout() {
    proxy.$store.token = ''
    proxy.$store.user_info = {}
    proxy.$go('/pages/tabs/index/index')
}
</script>

<style lang="scss" scoped>
.com-balance {
    width: 100%;
    height: auto;
    padding: 0 20rpx 20rpx;
    position: relative;
    z-index: 2;

    .b-box {
        width: 100%;
        padding: 30rpx;
        background: #fff;
        border-radius: 20rpx;

        .title {
            font-size: 30rpx;
            font-weight: 500;
            color: #000;

        }

        .s-box {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .s-item {
                width: 25%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding-top: 30rpx;

                .s-icon {
                    width: 52rpx;
                    height: 52rpx;
                    font-size: 52rpx;
                    color: $main_color;
                }

                .s-txt {
                    font-size: 24rpx;
                    color: #666;
                    margin-top: 10rpx;
                }
            }
        }
    }
}

.kf {
    position: relative;

    .nbtn {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        border: none;
        background-color: transparent;
    }
}
</style>
